<template>
  <div class="container">
    <div class="container-content">
      <vab-query-form>
        <vab-query-form-top-panel>
          <el-form
            :inline="true"
            label-width="80px"
            :model="syslogTable.queryForm"
          >
            <el-form-item label="用户名称">
              <el-input
                v-model="syslogTable.queryForm.userName"
                placeholder="用户名称"
              />
            </el-form-item>
            <el-form-item label="用户账号">
              <el-input
                v-model="syslogTable.queryForm.userCode"
                placeholder="用户账号"
              />
            </el-form-item>
            <el-form-item label="操作类型" prop="operType">
              <easy-dict-select
                ref="opertypeRef"
                :default-value="syslogTable.queryForm.operType"
                dict-code="1006"
                show-all="Y"
                @change="handlerOperTypeChange"
              />
            </el-form-item>
            <el-form-item label="选择日期">
              <el-date-picker
                v-model="syslogTable.queryForm.logDate"
                :editable="false"
                placeholder="选择日期"
                style="width: 160px"
                type="date"
                value-format="YYYY-MM-DD"
              />
            </el-form-item>
            <el-form-item>
              <el-button
                icon="refresh-left"
                type="warning"
                @click="handleResetQuery"
              >
                重置
              </el-button>
              <el-button icon="search" type="primary" @click="queryTableData">
                查询
              </el-button>
            </el-form-item>
          </el-form>
        </vab-query-form-top-panel>
        <vab-query-form-left-panel :span="24">
          <el-button
            icon="Remove"
            v-auth="['syslog/sc']"
            type="danger"
            @click="handleDelete"
          >
            批量删除
          </el-button>
        </vab-query-form-left-panel>
      </vab-query-form>

      <el-table
        ref="tableRef"
        v-loading="syslogTable.loading"
        border
        stripe
        :data="syslogTable.dataList"
        :height="syslogTable.height"
        :cell-style="tableStyle.cellStyle"
        :header-cell-style="tableStyle.headerCellStyle"
        @sort-change="handleSortChange"
        @selection-change="handleSelectionChange"
        @row-click="handleRowClick"
      >
        <el-table-column
          align="center"
          show-overflow-tooltip
          type="selection"
          width="60"
        />
        <el-table-column label="序号" type="index" width="60">
          <template #default="{ $index }">
            {{ $index + 1 }}
          </template>
        </el-table-column>
        <el-table-column
          align="center"
          label="用户名称"
          prop="userName"
          width="120"
        />
        <el-table-column
          align="center"
          label="用户账号"
          prop="userCode"
          width="120"
        />
        <el-table-column
          align="center"
          label="请求地址"
          prop="menuUrl"
          width="220"
          show-overflow-tooltip
        />
        <el-table-column
          align="center"
          label="操作内容"
          prop="logContent"
          width="400"
          show-overflow-tooltip
        >
          <template #default="{ row }">
            <el-button
              v-if="row.logContent"
              size="small"
              type="primary"
              @click="handleJsonView(row)"
              >查看</el-button
            >
            {{ row.logContent }}
          </template>
        </el-table-column>
        <el-table-column
          align="center"
          label="操作类型"
          prop="operTypeDesc"
          width="90"
        />
        <el-table-column
          align="center"
          :formatter="datetimeFormat"
          label="操作时间"
          prop="logDate"
          width="160"
        />
        <el-table-column align="center" fixed="right" label="操作" width="80">
          <template #default="{ row }">
            <el-button
              v-auth="['syslog/sc']"
              size="small"
              type="danger"
              @click="handleDelete(row)"
            >
              删除
            </el-button>
          </template>
        </el-table-column>
      </el-table>
      <el-pagination
        background
        :current-page="syslogTable.pagination.current"
        :layout="syslogTable.pagination.layout"
        :page-size="syslogTable.pagination.size"
        :total="syslogTable.pagination.total"
        @current-change="handleCurrentChange"
        @size-change="handleSizeChange"
      />
      <JsonView ref="jsonViewRef" />
    </div>
  </div>
</template>
<script setup name="Syslog" lang="ts">
import { useMessage, useMessageBox } from "@/hooks/message";
import EasyDictSelect from "@/components/dictSelect.vue";
import JsonView from "@/components/jsonView.vue";
import { datetimeFormat } from "@/utils/common";
import { querySysLogTable, deleteSysLog } from "@/api/admin/log/syslog/";
import type { BasicTableProps } from "@/hooks/table";
import { useTable } from "@/hooks/table";
import dayjs from "dayjs";

const tableRef = ref(null);
const opertypeRef = ref(null);
const jsonViewRef = ref(null);

const tableOptions = reactive<BasicTableProps>({
  autoLoad: true,
  queryForm: {
    operType: "ALL",
    logDate: dayjs(new Date()).format("YYYY-MM-DD"),
    userName: "",
    userCode: ""
  },
  queryFunction: querySysLogTable,
  descs: ["log_date"],
  onReseted: () => {
    opertypeRef.value.setValue("ALL");
  }
});

const {
  instance: syslogTable,
  tableStyle,
  queryTableData,
  handleSelectionChange,
  handleResetQuery,
  handleRowClick,
  handleSizeChange,
  handleCurrentChange,
  handleSortChange
} = useTable(tableOptions, tableRef);

const handlerOperTypeChange = val => {
  syslogTable.queryForm.operType = val;
  queryTableData();
};

const handleDelete = row => {
  if (row && row.id) {
    useMessageBox()
      .confirm("删除的日志将无法恢复，是否继续")
      .then(async () => {
        const { code, msg } = await deleteSysLog(row.id);
        if (code === 200) {
          useMessage().success(msg);
          await queryTableData();
        } else {
          useMessage().success(msg);
        }
      });
  } else {
    if (syslogTable.dataSelections.length > 0) {
      const ids = syslogTable.dataSelections.map(item => item.id).join();
      useMessageBox()
        .confirm("删除的日志将无法恢复，是否继续")
        .then(async () => {
          const { code, msg } = await deleteSysLog(ids);
          if (code === 200) {
            useMessage().success(msg);
            await queryTableData();
          } else {
            useMessage().success(msg);
          }
        });
    } else {
      useMessage().warning("未选中任何行");
    }
  }
};

const handleJsonView = row => {
  jsonViewRef.value.show(row.logContent);
};
</script>
<style lang="scss" scoped></style>
